<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="canIGetUserInfo && type == 0">
			<view class='headView'>
				<!-- <open-data class="headImageView" type="userAvatarUrl"></open-data> -->
				<image class="headImageView" src="../../static/logo_144.png" mode="aspectFill"></image>
				<view class="appName util-font-medium">{{name}}</view>
				<view class='titleText'>申请获取以下权限</view>
				<view class="line-view"></view>
				<view class='contentText'>· 获得你的公开信息(昵称,头像等)</view>
				<button class="authBtn" open-type="getUserInfo" @getuserinfo="wxGetUserInfo" withCredentials="true">同意授权</button>
				<view class="cancelBtn" @click="cancel">取消</view>
			</view>
		</view>
		<view v-else-if="canIGetPhoneNumber && type == 1">
			<view class='headView'>
				<!-- <open-data class="headImageView" type="userAvatarUrl"></open-data> -->
				<image class="headImageView" src="../../static/logo_144.png" mode="aspectFill"></image>
				<view class="appName util-font-medium">{{name}}</view>
				<view class='titleText'>申请获取以下权限</view>
				<view class="line-view"></view>
				<view class='contentText'>· 获得你的手机号码</view>
				<button class="authBtn" open-type="getPhoneNumber" @getphonenumber="wxGetPhoneNumber" withCredentials="true">同意授权</button>
				<view class="cancelBtn" @click="cancel">取消</view>
			</view>
		</view>
		<view v-else>请升级微信版本{{canIGetUserInfo}}{{canIGetPhoneNumber}}</view>
		<!-- #endif -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				msg: '',
				
				canIGetUserInfo: uni.canIUse('button.open-type.getUserInfo'),
				canIGetPhoneNumber: uni.canIUse('button.open-type.getPhoneNumber'),
				
				name: this.appName,
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			if (options.msg) {
				this.msg = options.msg
			}
		},
		methods: {
			wxGetUserInfo: function(res) {
				var that = this
				var userRes = res
				console.log(that.$baseUrl)
				console.log(JSON.stringify(res))
				if (!res.detail.iv) {
					uni.showToast({
						title: "您取消了授权,登录失败",
						icon: "none"
					});
					return false;
				}
				console.log('-------用户授权，并获取用户基本信息和加密数据------')

				uni.login({
					provider: "weixin",
					scopes: "auth_user",
					success: function(res) {
						console.log('######' + res.code)
						
						// 需要传到下个页面的数据
						var data = {
							"code": res.code,
							"signature": userRes.detail.signature,
							"rawData": userRes.detail.rawData,
							"encryptedData": userRes.detail.encryptedData,
							"iv": userRes.detail.iv,
							pullUserId: uni.getStorageSync('pullUserId')?uni.getStorageSync('pullUserId'):'0'
							}
			
						// 将code和验证信息发送到后台,获取后台userInfo
						uni.request({
							url: that.$baseUrl + 'app/wx/user/' + uni.getStorageSync('appId') + '/reg',
							method: 'GET',
							header: that.$urlRequest.getHeader(),
							data: data,
							success: (res) => {
								if (res.data.code == 0) {
									console.log("注册成功")
									console.log("用户信息" + res.data.data)
									uni.setStorageSync('userInfo', res.data.data)
									uni.setStorageSync('accessToken', res.data.data.accessToken)
									uni.$emit('loginSuccess', {
										msg: '登录'
									})
									if (that.msg == 'getPhoneNumber') {
										if (res.data.data.phone) {
											uni.navigateBack({
												animationDuration: 200,
											})
											uni.$emit('getPhoneNumberSuccess', {
												msg: '绑定手机号成功'
											})
										}else{
											uni.redirectTo({
												url: 'login?type=1&msg=' + that.msg
											})
										}
										
									}else{
										uni.navigateBack({
											animationDuration: 200,
										})
									}
								} else {
									uni.showModal({
										title: '用户注册失败',
										content: res.data.msg,
										showCancel: false
									});
								}
							},
							fail: (err) => {
								uni.showModal({
									content: '用户注册失败，请重试',
									showCancel: false
								});
							}
						})
					},
					fail: function() {
						console.log("获取code失败")
					},
				})
			},
			wxGetPhoneNumber: function(res){
				var that = this
				var userRes = res
				console.log(that.$baseUrl)
				console.log(JSON.stringify(res))
				if (!res.detail.iv) {
					uni.showToast({
						title: "您取消了授权,登录失败",
						icon: "none"
					});
					return false;
				}
				console.log('-------用户授权，并获取用户手机号加密数据------')
				
				uni.login({
					provider: "weixin",
					scopes: "auth_user",
					success: function(res) {
						console.log('######' + res.code)
						
						// 需要传到下个页面的数据
						var data = {
							"code": res.code,
							"signature": userRes.detail.signature,
							"rawData": userRes.detail.rawData,
							"encryptedData": userRes.detail.encryptedData,
							"iv": userRes.detail.iv
						}
							
						// 将code和验证信息发送到后台,获取后台userInfo
						uni.request({
							url: that.$baseUrl + 'app/wx/user/' + uni.getStorageSync('appId') + '/phone',
							method: 'GET',
							header: that.$urlRequest.getHeader('token'),
							data: data,
							success: (res) => {
								if (res.data.code == 0) {
									console.log("绑定手机号成功")
									console.log("用户信息" + res.data.data)
									uni.setStorageSync('userInfo', res.data.data)
									uni.navigateBack({
										animationDuration: 200,
									})
									uni.$emit('getPhoneNumberSuccess', {
										msg: '绑定手机号成功'
									})
								} else {
									uni.showModal({
										title: '绑定手机号失败',
										content: res.data.msg,
										showCancel: false
									});
								}
							},
							fail: (err) => {
								uni.showModal({
									content: '绑定手机号失败，请重试',
									showCancel: false
								});
							}
						})
					},
					fail: function() {
						console.log("获取code失败")
					},
				})
			},
			cancel: function(){
				uni.navigateBack({
					
				})
			}
		},
		

	}
</script>

<style>
	.headView {
		width: 550upx;
		margin: 200upx 100upx 100upx;
		text-align: center;
	}

	.headImageView {
		display: block;
		width: 150upx;
		height: 150upx;
		margin-left: 200upx;
		border-radius: 20rpx;
	}
	
	.appName {
		font-size: 34rpx;
		color: #333333;
		margin-top: 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		
	}
	.titleText {
		font-size: 14px;
		color: #020e0f;
		text-align: center;
		margin-top: 60upx;
	}
	.line-view {
		width: 550rpx;
		height: 2rpx;
		background-color: #dddddd;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.contentText {
		width: 550rpx;
		margin-top: 5px;
		margin-bottom: 0px;
		font-size: 32rpx;
		color: #333;
		text-align: left;
	}

	.authBtn {
		width: 550rpx;
		margin-top: 35px;
		height: 88rpx;
		font-size: 35rpx;
		background-color: #1D9328;
		color: #FFFFFF;
	}
	.cancelBtn {
		width: 550rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #999999;
	}
</style>
